<template>
  <div v-loading="loading">
    <div class="header-search cad-box">
      <el-input
        v-model="searchValue.realName"
        style="width: 20%"
        clearable
        placeholder="请输入计划名称"
      />
      <el-select
        v-model="searchValue.status"
        placeholder="请选择拨款状态"
        style="width: 20%; margin: 0px 20px"
        clearable
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="searchValue.time"
        style="width: 20%"
        type="date"
        placeholder="选择日期"
      />
      <el-button
        type="primary"
        style="margin: 0px 10px"
        @click="handleCouponList"
      >确定</el-button>
    </div>

    <div class="content-table cad-box" style="">
      <el-button
        type="primary"
        style="margin: 0px 10px"
        @click="handleOpenAdd"
      >新增</el-button>
      <!-- <el-button type="primary" style="margin: 0px 10px" @click="onSubmit"
        >一键推送</el-button
      > -->
      <span style="font-size:12px;color:red">每次计划只能推送一次，建议每月月底推送数据</span>
      <el-table
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="计划名称" align="center" />
        <el-table-column prop="useNumber" label="使用人数" align="center" />
        <el-table-column
          prop="appliedAmount"
          label="申请优惠券金额"
          align="center"
        />
        <el-table-column
          prop="appropriationAmount"
          label="拨款总额"
          align="center"
        />
        <el-table-column prop="state" label="拨款状态" align="center">
          <template slot-scope="scope">
            {{ options2.find((item) => scope.row.state === item.value).label }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleInfo(scope.row, 1)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="提示" :visible.sync="dialogShow" width="30%">
        <div>
          <div style="display: flex; align-items: center">
            <div><span style="color: red">*</span>选择计划：</div>
            <div>
              <el-select
                v-model="selectValue"
                placeholder="请选择"
                @change="handleSelectJh"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          <div style="display: flex; margin-top: 50px">
            <div><span style="color: red">*</span>选择宝宝：</div>
            <div style="display: flex">
              <el-checkbox
                v-model="checkAll"
                :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"
              >全选</el-checkbox>
              <div style="margin: 0px 15px" />
              <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox
                  v-for="city in cities"
                  :key="city.childId"
                  :label="city"
                  style="margin-bottom: 20px"
                >{{ city.childName }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShow = false">取 消</el-button>
          <el-button type="primary" @click="handleAddSub">确 定</el-button>
        </span>
      </el-dialog>
      <div style="text-align: right">
        <el-pagination
          :current-page="pagination.pageNum"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { couponList, selectChildByCard, pushChildByCard } from './api'
export default {
  data () {
    return {
      options: [],
      selectValue: {},
      options1: [
        {
          value: 1,
          label: '已整改'
        },
        {
          value: 2,
          label: '未整改'
        }
      ],
      options2: [
        {
          value: 0,
          label: '未拨款'
        },
        {
          value: 1,
          label: '已拨款'
        }
      ],
      drawer: false,
      direction: 'rtl',
      infoItem: {},
      loading: false,
      searchValue: {
        realName: '',
        status: '',
        time: ''
      },
      tableData: [],
      pagination: {
        pageNum: 0,
        pageSize: 10
      },
      total: 0,
      multipleSelection: [],
      dialogShow: false,
      checkAll: false,
      checkedCities: [],
      cities: [],
      citiesAll: [],
      isIndeterminate: true
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  created () {
    this.handleCouponList()
  },
  mounted () {},
  methods: {
    async handleSelectJh (val) {
      this.checkAll = false
      this.checkedCities = []
      this.cities = []
      this.citiesAll = []
      const res = await selectChildByCard({
        areaId: this.curArea.id,
        card: val.code,
        endTime: val.endTime
      })
      console.log(res, 'contactInfo')
      this.cities = res.childList
      this.citiesAll = res.childList
    },
    async handleCouponList () {
      const res = await couponList({
        areaId: this.curArea.id,
        name: this.searchValue.realName,
        state: this.searchValue.status,
        pageNum: 0,
        pageSize: 99
      })
      this.total = Number(res.total)
      this.tableData = res.records
      this.options = res.records.map((item) => {
        return {
          value: item.id,
          label: item.name,
          code: item.code,
          endTime: item.endTime,
          id: item.id
        }
      })
      console.log(res, 'handleCouponList')
    },
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.citiesAll : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    },
    handleOpenAdd () {
      this.checkAll = false
      this.checkedCities = []
      this.cities = []
      this.citiesAll = []
      this.selectValue = {}
      this.dialogShow = true
    },
    async handleAddSub () {
      if (!this.selectValue.id) {
        this.$message.warning('请选择计划')
        return false
      }
      if (this.checkedCities.length === 0) {
        this.$message.warning('请选择宝宝')
        return false
      }
      await pushChildByCard({
        id: this.selectValue.id,
        childSize: this.checkedCities.length,
        areaId: this.curArea.id,
        location: this.curArea.location,
        couponCode: this.selectValue.code,
        areaName: this.curArea.areaName,
        list: this.checkedCities
      })
      this.handleCouponList()
      this.dialogShow = false
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleInfo (item) {
      this.$router.push(`/coupon/detail?id=${item.id}`)
    },
    onSubmit () {},
    getTableList () {},
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagination.pageSize = val
      this.getTableList()
    },

    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagination.pageNum = val
      this.getTableList()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header {
  color: #000 !important;
  font-size: 18px !important;
}
.el-dialog .el-dialog__header {
  border: none !important;
}

.header-search {
  display: flex;
  margin-bottom: 30px;

  .select-box {
    width: 20%;
    margin: 0 20px;
  }
}

.drawer_box {
  width: 100%;
  padding: 0px 50px;
  .drawer_item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    padding: 10px;
  }
}
</style>
